@use './local/use';
@import './local/index';

$container-height: 200px !default;
$highlight-color: #fff;
$border-style: 1px solid #bbb;

@mixin model-container($shadow-color: #aaa) {
    box-sizing: border-box;
    padding: 14px;
    box-shadow: 0 0 12px $shadow-color;

    &:hover {
        transform: translateY(-4px);
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 100px;
            height: 32px
        }
    }
}

@include use.jia3();

.red-theme {
    @import './local/red-theme';
}

.container {
    color: $highlight-color; // color
    border: $border-style;
    height: $container-height;

    .first {
        display: block;

        border: {
            width: 1px;
            style: solid;
            color: #aaa;
        }
    }

    .last {
        display: flex;
    }
}

.model-container {
    @include model-container(#888);
}

.box {
    width: 100px;
    height: 100px;
}

.box a {
    color: blue;
}

div.box {
    font-size: 12px
}

.high-box {
    @extend .box;
    height: 200px;
}

$num-list: 1, 2, 3, 4, 5;

@each $item in $num-list {
    .item-#{$item} {
        height: 100px * $item;
    }
}